<template>
  <div class="list_tpl" style="width: 100%;">
    <el-row>
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3" v-for="(o, i) in list_new" :key="i">
        <div class="item" :class="{ active: val.name === o.name }" @click="command(href, o)">
          <div class="meida">
            <img :src="o.img ? $fullUrl(o.img) : '/img/preview.png'" :alt="o.title">
          </div>
          <div class="doc">
            <h5>{{ o.title }}</h5>
            <p class="desc"><span>{{ o.framework }}</span><span>{{ o.device }}{{ o.client }}</span></p>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 预览弹窗 -->
    <el-dialog title="预览" :visible.sync="show">
      <div class="preview">
        <img :src="obj.img ? $fullUrl(obj.img) : '/img/preview.png'" :alt="obj.title">
      </div>
    </el-dialog>
    <!-- /预览弹窗 -->
  </div>
</template>

<script>
  export default {
    model: {
      event: 'change',
      prop: 'val'
    },
    props: {
      preview: {
        type: String,
        default: ""
      },
      query: {
        type: Object,
        default: function() {
          return {
            keyword: "",
            mode: "",
            client: "",
            device: "",
            framework: "",
            ui: "",
            color: "",
            user_id: 0
          }
        }
      },
      href: {
        type: String,
        default: ""
      },
      val: {
        type: Object,
        default: function() {
          return {
            name: "",
            title: "",
            keyword: "",
            mode: "",
            client: "",
            device: "",
            framework: "",
            ui: "",
            color: ""
          }
        }
      }
    },
    data() {
      return {
        index: 0,
        url_get_list: "~/apis/dev/template?",
        list: [],
        obj: {},
        show: false
      }
    },
    methods: {
      /**
       * 获取模板列表
       */
      get_list() {
        this.$get(this.url_get_list, {
          page: 0,
          size: '0'
        }, (res) => {
          if (res.result) {
            this.list = res.result.list.map((o) => {
              if (o.img && o.img.indexOf("/") === 0) {
                o.img = this.$fullUrl("~" + o.img);
              }
              return o;
            });
          } else {
            this.$message({
              message: res.error.message
            })
          }
        });
      },
      /**
       * 指令
       * @param {String} href 链接地址
       * @param {Object} o 当前出发的模板对象
       */
      command(href, o) {
        if (href && o.name === this.val.name) {
          this.$router.push(href + "template_id=" + o.template_id)
        } else {
          if (this.preview) {
            this.obj = o;
            this.show = true;
          }
          this.$emit('change', o);
        }
      }
    },
    created() {
      this.get_list();
    },
    computed: {
      /**
       * 计算 - 新模板列表，用于页面过滤显示
       */
      list_new() {
        var query = {};
        for (var k in this.query) {
          var val = this.query[k];
          if (val) {
            query[k] = val;
          }
        }
        var lt = [];
        this.list.map(o => {
          var bl = true;
          if (query.keyword && (o.name.indexOf(query.keyword) === -1 && o.title.indexOf(query.keyword) === -1)) {
            bl = false;
          } else if (query.mode && o.mode.indexOf(query.mode) === -1) {
            bl = false;
          } else if (query.client && o.client.indexOf(query.client) === -1) {
            bl = false;
          } else if (query.device && o.device.indexOf(query.device) === -1) {
            bl = false;
          } else if (query.framework && o.framework.indexOf(query.framework) === -1) {
            bl = false;
          } else if (query.ui && o.ui.indexOf(query.ui) === -1) {
            bl = false;
          } else if (query.color && o.color.indexOf(query.color) === -1) {
            bl = false;
          } else if (query.user_id && (o.user_id && o.user_id === query.user_id)) {
            bl = false;
          }
          if (bl) {
            lt.push(o);
          }

        });
        //  this.list.get(query)
        return lt;
      }
    }
  }
</script>

<style scoped="scoped">
  .list_tpl {
    overflow: hidden;
  }

  .list_tpl .item {
    padding: 0.25rem;
    margin: 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
  }

  .list_tpl img {
    width: 100%;
    height: 12rem;
  }

  .list_tpl .doc {
    text-align: center;
  }

  .list_tpl .doc h5 {
    margin-top: 4px;
    margin-bottom: 0;
  }

  .list_tpl .active {
    border-color: #409EFF;
  }

  .list_tpl .desc {
    font-size: 0.75rem;
    margin: 0.25rem;
    color: #666;
  }

  .list_tpl .desc span {
    margin: 0 0.5rem;
  }
</style>
